
<template>
    <div class="login">
        <h3>后台管理系统</h3>
        <div class="box">
            <el-form :model="form" :rules="rules" ref="formref">
                <el-form-item prop="adminname">
                    <el-input v-model="form.adminname" placeholder="输入账号" />
                </el-form-item>
                <el-form-item prop="password">
                    <el-input v-model="form.password" placeholder="输入密码" :type="show" />
                    <span class="changetext">
                        <el-icon @click="changes" v-if="!isnone">
                            <Hide />
                        </el-icon>
                        <el-icon @click="changes" v-else-if="isnone">
                            <View />
                        </el-icon>
                    </span>
                </el-form-item>
            </el-form>
            <el-button type="primary" class="btn" @click="onSubmit(formref)">登陆</el-button>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { ElNotification, type FormInstance, type FormRules } from 'element-plus'
import server from '../api/index'
import { useRouter } from 'vue-router';
import { uesUseinfoStore } from '../stores/useinfo'
import axios from 'axios';
var form = ref({ adminname: "", password: "" })
var formref = ref()
var router = useRouter()
var useinfo = uesUseinfoStore()
var isnone = ref(false)
const show = ref("password")
//表单的每一项的验证规则
const rules = {
    adminname: [
        { required: true, message: '请输入账号', trigger: 'change' },
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'change' }
    ]
}
const changes = () => {
    isnone.value = !isnone.value
    if (isnone.value == false) {
        show.value = 'password'
    } else if (isnone.value == true) {
        show.value = 'text'
    }
}
//登录提交
const onSubmit = (formEl: any) => {
    formEl.validate(async (valid: any) => {
        if (valid) {
            var res = await server.admin.student_login(form.value)
            console.log(res)
            if (res.data.code == 200) {
                ElNotification.closeAll()
                ElNotification.success({ message: '登陆成功' })
                useinfo.save_useinfo(res.data.data)
                setTimeout(() => {
                    router.push('/index')
                }, 2000)
            } else {
                ElNotification.closeAll()
                ElNotification.error({ message: '登陆失败' })
            }
        }
    })
}


</script>
<style scoped>
.login {
    height: 100%;
    background: url(../img/bg.035dc3cb90909320a094.jpg) no-repeat;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

h3 {
    line-height: 60px;
}

.box {
    padding: 50px 70px;
    background-color: #fff;
    border-radius: 20px;
    position: relative;
}

.box .btn {
    width: 260px;
    background-color: #1677ff;
}

.box .changetext {
    position: absolute;
    right: 20px;
}
</style>
